<template>
	<el-dialog
		:visible.sync="visible"
		title="批量导入"
		:close-on-click-modal="false"
		class="m-view-dialog m-view-dialog_center m-view-dialog-import"
		lock-scroll
		width="1000px"
	>
		<el-steps
			:active="active"
			align-center
		>
			<el-step title="上传文件"/>
			<el-step title="数据预览"/>
			<el-step title="导入数据"/>
		</el-steps>
		<div
			v-show="active == 1"
			class="import-main"
		>
			<div class="upload">
				<div class="up_left">
					<img src="../../images/upload.png">
				</div>
				<div class="up_right">
					<p class="title">上传填好的数据表</p>

					<p class="tip">
						文件后缀名必须是xls或xlsx，文件大小不超过500KB，最多支持导入1000条数据
					</p>
					<el-upload
						:action="actionUrl"
						:headers="{ Authorization: $store.getters.token }"
						:on-success="handleSuccess"
						:on-remove="handleRemove"
						:before-remove="beforeRemove"
						:on-change="handleChange"
						:file-list="fileList"
						accept=".xls,.xlsx"
						:before-upload="beforeUpload"
						class="upload-area"
					>
						<el-button type="text">上传文件</el-button>
					</el-upload>
				</div>
			</div>
			<div class="upload">
				<div class="up_left">
					<img src="../../images/upload.png">
				</div>
				<div class="up_right">
					<p class="title">填写导入数据信息</p>
					<p class="tip">
						请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除
					</p>
					<el-button
						type="text"
						@click="templateDownload"
					>
						下载模板
					</el-button>
				</div>
			</div>
		</div>
		<div
			v-show="active == 2"
			class="import-main"
		>
			<el-table
				v-loading="listLoading"
				:data="list"
				:span-method="arraySpanMethod"
			>
				<el-table-column
					v-for="(item, index) in headerList"
					:key="index"
					:prop="item.id"
					:label="item.fullName"
					min-width="150"
					:align="item.children ? 'center' : 'left'"
				>
					<template
						v-if="!item.children"
						#default="scope"
					>
						<el-input v-model="scope.row[item.id]"/>
					</template>
					<template v-if="item.children">
						<el-table-column
							v-for="(it, i) in item.children"
							:key="i"
							:prop="item.id + '-' + it.id"
							:label="it.fullName"
							:width="it.id == 'delete' ? 50 : 150"
							class-name="child-table-box"
						>
							<template #default="scope">
								<div class="m-view-child-table-column">
									<tr
										v-for="(row, j) in scope.row[item.id]"
										:key="j"
										class="child-table__row no-border-bottom"
									>
										<td
											v-for="(obj, k) in item.children"
											:key="k"
											:class="
												obj.id == 'delete'
													? 'delete'
													: 'td-flex-1 mx-0 my-10px'
											"
										>
											<el-input
												v-if="obj.id != 'delete'"
												v-model="row[obj.id]"
											/>
											<el-button
												v-else
												size="mini"
												type="text"
												class="m-view-table-delBtn"
												@click="handleTableDel(scope.$index, j, item)"
											>
												{{t("删除")}}
											</el-button>
										</td>
									</tr>
								</div>
							</template>
						</el-table-column>
					</template>
				</el-table-column>
				<el-table-column
					:label="t('操作')"
					fixed="right"
					width="50"
				>
					<template #default="scope">
						<el-button
							size="mini"
							type="text"
							class="m-view-table-delBtn"
							@click="handleDel(scope.$index)"
						>
							{{t("删除")}}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div
			v-show="active == 3"
			class="import-main import-main-overflow"
		>
			<div
				v-if="!result.resultType"
				class="success"
			>
				<img
					src="../../images/success.png"
					alt=""
				>
				<p class="success-title">批量导入成功</p>
				<p class="success-tip">您已成功导入{{result.snum}}条数据</p>
			</div>
			<div
				v-if="result.resultType"
				class="unsuccess"
			>
				<el-alert
					title="错误提醒：导入失败数据展示"
					type="warning"
					show-icon
					:closable="false"
				/>
				<div class="upload error-show">
					<div class="up_left">
						<img
							class=""
							src="../../images/tip.png"
						>
					</div>
					<div class="up_right">
						<p class="tip">
							正常数量条数：<el-link
								type="success"
								:underline="false"
							>
								{{result.snum}}条
							</el-link>
						</p>
						<p class="tip">
							异常数量条数：<el-link
								type="danger"
								:underline="false"
							>
								{{result.fnum}}条
							</el-link>
						</p>
					</div>
				</div>
				<div class="contips">
					<p>以下文件数据为导入异常数据</p>
					<el-button
						type="text"
						icon="el-icon-upload2"
						@click="exportExceptionData"
					>
						导出异常数据
					</el-button>
				</div>
				<el-table
					v-loading="listLoading"
					:data="resultList"
					:span-method="arraySpanMethod"
				>
					<el-table-column
						v-for="(item, index) in resultHeaderList"
						:key="index"
						:prop="item.id"
						:label="item.fullName"
						min-width="150"
						:align="item.children ? 'center' : 'left'"
					>
						<template
							v-if="!item.children"
							#default="scope"
						>
							{{scope.row[item.id]}}
						</template>
						<template v-if="item.children">
							<el-table-column
								v-for="(it, i) in item.children"
								:key="i"
								:prop="item.id + '-' + it.id"
								:label="it.fullName"
								:width="it.id == 'delete' ? 50 : 150"
								class-name="child-table-box"
							>
								<template #default="scope">
									<div class="m-view-child-table-column">
										<tr
											v-for="(row, j) in scope.row[item.id]"
											:key="j"
											class="child-table__row no-border-bottom"
										>
											<td
												v-for="(obj, k) in item.children"
												:key="k"
												:class="
													obj.id == 'delete'
														? 'delete'
														: 'td-flex-1 mx-0 my-10px'
												"
											>
												{{row[obj.id]}}
											</td>
										</tr>
									</div>
								</template>
							</el-table-column>
						</template>
					</el-table-column>
					<el-table-column
						label="异常原因"
						prop="errorsInfo"
						fixed="right"
						width="170"
					/>
				</el-table>
			</div>
		</div>
		<template #footer>
			<span
				class="dialog-footer"
			>
				<el-button
					v-if="active == 1"
					@click="cancel()"
				>取 消</el-button>
				<el-button
					v-if="active == 2"
					@click="prev"
				>上一步</el-button>
				<el-button
					v-if="active < 3"
					type="primary"
					:loading="btnLoading"
					:disabled="active == 1 && !fileName"
					@click="next"
				>下一步
				</el-button>
				<el-button
					v-else
					type="primary"
					@click="cancel(true)"
				>关 闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
// import {
// 	getTemplateDownload,
// 	getImportPreview,
// 	importData,
// 	getImportExceptionData,
// } from '@/api/common';
import {t} from '../../utils/index.js';
export default {
	data(){
		return {
			t,
			visible:false,
			btnLoading:false,
			listLoading:false,
			fileName:'',
			fileList:[],
			active:1,
			list:[],
			headerList:[],
			resultHeaderList:[],
			resultList:[],
			result:{
				resultType:0,
				snum:0,
				fnum:0,
			},
			modelId:'',
			url:'',
			actionUrl:'',
			mergeList:[],
		};
	},
	methods:{
		init(modelId, url){
			this.active = 1;
			this.fileList = [];
			this.fileName = '';
			this.visible = true;
			this.modelId = modelId || '';
			this.actionUrl = `${this.$pathConfig.comUrl}/api/${
                url || 'visualdev/OnlineDev'
            }/Uploader`;
			this.url = url || `visualdev/OnlineDev/${this.modelId}`;
		},
		beforeUpload(file){
			const isRightSize = file.size / 1024 < 500;
			if(!isRightSize)this.$message.error(`文件大小不能超过500KB`);
			return isRightSize;
		},
		handleRemove(file, fileList){
			this.fileList = [];
		},
		beforeRemove(file, fileList){
			return this.$confirm(`确定移除 ${file.name}？`).then(() => {});
		},
		handleChange(file, fileList){
			this.fileList = fileList.slice(-1);
		},
		handleSuccess(res, file, fileList){
			if(res.code == 200){
				this.fileList = fileList.slice(-1);
				this.fileName = res.data.name;
			}else{
				this.fileList = fileList.filter((o) => o.uid != file.uid);
				this.$message({message:res.msg, type:'error', duration:1000});
			}
		},
		templateDownload(){
			// getTemplateDownload(this.modelId, this.url).then((res) => {
			// 	this.$commonUtils.downloadFile(res.data.url);
			// });
		},
		prev(){
			if(this.active == 1) return;
			this.active--;
		},
		next(){
			if(this.active == 2){
				if(!this.list.length){
					return this.$message({message:'导入数据为空', type:'warning'});
				}
				this.btnLoading = true;
				// importData(this.modelId, {list:this.list}, this.url)
				// 	.then((res) => {
				// 		this.result = res.data;
				// 		this.resultList = res.data.failResult;
				// 		this.btnLoading = false;
				// 		this.active++;
				// 		this.getMergeList(this.resultHeaderList);
				// 	})
				// 	.catch(() => {
				// 		this.btnLoading = false;
				// 	});
			}
			if(this.active == 1){
				if(!this.fileList.length || !this.fileName){
					return this.$message({message:'请先上传文件', type:'warning'});
				}
				this.btnLoading = true;
				// getImportPreview(this.modelId, {fileName:this.fileName}, this.url)
				// 	.then((res) => {
				// 		this.list = res.data.dataRow;
				// 		this.resultHeaderList = JSON.parse(JSON.stringify(res.data.headerRow));
				// 		for(let index = 0; index < res.data.headerRow.length; index++){
				// 			const item = res.data.headerRow[index];
				// 			if(item.children && item.children.length){
				// 				item.children.push({
				// 					fullName:'操作',
				// 					id:'delete',
				// 				});
				// 			}
				// 		}
				// 		this.headerList = JSON.parse(JSON.stringify(res.data.headerRow));
				// 		this.btnLoading = false;
				// 		this.active++;
				// 		this.getMergeList(this.headerList);
				// 	})
				// 	.catch(() => {
				// 		this.btnLoading = false;
				// 	});
			}
		},
		getMergeList(list){
			this.mergeList = [];
			list.forEach((item) => {
				if(item.children && item.children.length > 0){
					item.children.forEach((child, index) => {
						if(index == 0){
							this.mergeList.push({
								prop:item.id + '-' + child.id,
								rowspan:1,
								colspan:item.children.length,
							});
						}else{
							this.mergeList.push({
								prop:item.id + '-' + child.id,
								rowspan:0,
								colspan:0,
							});
						}
					});
				}else{
					this.mergeList.push({
						prop:item.id,
						rowspan:1,
						colspan:1,
					});
				}
			});
		},
		arraySpanMethod({row, column, rowIndex, columnIndex}){
			for(let i = 0; i < this.mergeList.length; i++){
				if(column.property == this.mergeList[i].prop){
					return [this.mergeList[i].rowspan, this.mergeList[i].colspan];
				}
			}
		},
		handleDel(index){
			this.list.splice(index, 1);
		},
		handleTableDel(index, i, item){
			this.list[index] && this.list[index][item.id] && this.list[index][item.id].splice(i, 1);
		},
		cancel(isRefresh){
			this.visible = false;
			if(isRefresh)this.$emit('refresh');
		},
		exportExceptionData(){
			// getImportExceptionData(this.modelId, {list:this.resultList}, this.url).then((res) => {
			// 	this.$commonUtils.downloadFile(res.data.url);
			// });
		},
	},
};
</script>
<style lang="scss" scoped>
.delete {
    width: 50px;
    text-align: center;
}
.no-border-bottom {
    border-bottom: unset;
}
.import-main-overflow {
    overflow: unset;
}
.m-view-dialog-import {
    ::v-deep.el-dialog__body {
        padding: 20px 40px 2px !important;
    }

    .import-main {
        height: 500px;
        margin-top: 20px;
        overflow: hidden;
        position: relative;

        .upload {
            display: flex;
            border: 1px solid #dcdfe6;
            margin-bottom: 25px;

            &.error-show {
                margin-top: 10px;
                margin-bottom: 15px;

                .up_left {
                    height: 120px;
                }

                .up_right {
                    padding-top: 20px;
                    font-size: 16px;

                    .el-link {
                        font-size: 16px;
                    }
                }
            }

            .up_left {
                width: 126px;
                height: 140px;
                background: #f9f9f9;
                text-align: center;
                padding-top: 20px;
                flex-shrink: 0;

                img {
                    width: 80px;
                    height: 80px;
					margin: 0 auto;
                }
            }

            .up_right {
                color: #333;
                margin-left: 30px;
                font-size: 14px;
                padding-top: 30px;
                flex: 1;

                .title {
                    font-size: 18px;
                    font-weight: bold;
                }

                .tip {
                    margin: 15px 0;
                }
            }

            .upload-area {
                display: flex;
                padding-right: 200px;

                .el-upload {
                    margin-right: 50px;
                    flex-shrink: 0;
                }

                .el-upload-list {
                    flex: 1;
                }

                .el-upload-list__item:first-child {
                    margin-top: 5px;
                }
            }
        }

        .success {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 110px;

            .success-title {
                margin: 20px 0;
                font-size: 18px;
                font-weight: bold;
            }
        }

        .contips {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }
    }
}
</style>